@import "style-variable.scss";

.main {

    &-top {
        $height: 350px;
        height: $height;
        display: flex;
        justify-content: space-between;

        &-left {
            $whidth: 940px;
            width: $whidth;
            height: $height;

            &-img-box {
                overflow: hidden;

                &:hover {
                    img {
                        @include img_hover_scale;
                    }
                }

                img {
                    width: $whidth;
                    height: $height;
                    @include img_all_animation_time;

                }
            }
        }

        &-right {
            $whidth: 300px;
            width: $whidth;
            height: $height;

            &-top {
                width: $whidth;
                height: $height/5;
                overflow: hidden;

                img {
                    width: $whidth*1-10px;
                    height: $height/5-10px;
                    padding: 5px;
                }
            }

            &-center {
                width: $whidth;
                height: $height/1.75;
                overflow: hidden;

                &-tools {
                    flex-wrap: wrap;
                    justify-content: space-between;

                    li {
                        width: $whidth/3-9;
                        height: $height/1.75/5-6;
                        align-content: center;
                        margin-top: 5px;
                        padding: 0 1px;

                        &:hover {
                            a {
                                border-color: #dfdfdf;
                            }
                        }

                        a {
                            border: 1px solid $linecolor;
                            display: flex;
                            width: $whidth/3-9;
                            justify-content: center;
                            align-items: center;

                            img {
                                width: 28px;
                                height: 28px;
                                padding: 5px 5px;
                            }

                            p {
                                font-size: 12px;
                            }
                        }

                    }

                }

            }

            &-end {
                width: $whidth;
                height: $height/5;
                align-items: center;
                justify-content: center;
            }
        }
    }

    &-tool-bar {
        height: 50px;
        position: relative;
        justify-content: space-between;

        &-announcement {
            width: 700px;
            // 通知
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            color: #333333;
            font-size: 16px;
            overflow: hidden;
            cursor: pointer;

            &:hover {
                .main-tool-bar-announcement-text {
                    animation-play-state: paused;
                }
            }

            &-text {
                padding-left: 100%;
                text-align: right;
                white-space: nowrap;
                animation-name: move;
                animation-duration: 30s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;

                @keyframes move {
                    from {
                        transform: translateZ(0);
                    }

                    to {
                        transform: translate3d(-100%, 0, 0);
                    }

                }

                img {
                    height: 50px;
                    margin-right: 5px;
                }
            }
        }

        &-weather {
            width: 100px;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        &-statistics {
            width: 390px;
            overflow: hidden;

            &-text {
                height: 50px;
                line-height: 50px;

                i {
                    width: 25px;
                    display: inline-block;
                    padding-right: 2px
                }
            }

            &-ul {
                flex-wrap: wrap;
                justify-content: flex-start;
                line-height: 50px;

            }
        }

    }

    &-article {
        justify-content: space-between;

        &-left {
            width: 900px;
        }

        &-right {
            width: 300px;
        }

        &-box {
            a {
                overflow: hidden;
                display: block;
            }

            &-img {
                width: 145px;
                height: 150px;
                margin: 10px;

                &:hover {
                    img {
                        @include img_hover_scale;
                    }
                }

                img {
                    width: 145px;
                    height: 150px;
                    @include img_all_animation_time;
                }
            }

            &-text {
                width: 700px;
                overflow: hidden;

                h3 {
                    overflow: hidden;
                    height: 30px;
                    line-height: 30px;
                    padding: 5px 3px;
                    font-size: 20px;
                }

                p {
                    font-size: 15px;
                    line-height: 25px;
                    padding: 5px 3px;
                }

                &-info {
                    flex-direction: row;
                    justify-content: space-between;

                    &-tag-list {
                        flex-wrap: nowrap;
                        flex-direction: row;
                        overflow: hidden;
                        justify-content: flex-start;
                        width: 100%;

                        @each $key,
                        $value in $taglist {
                            a:nth-child(7n+#{$key}) {
                                background-color: $value
                            }
                        }

                        a {
                            display: block;
                            overflow: hidden;
                            height: 25px;
                            padding: 0 5px;
                            line-height: 25px;
                            margin: 2px 3px;
                            color: $bgwhite;
                        }
                    }

                    &-list {
                        padding: 5px 0;
                        justify-content: space-between;

                        a {
                            display: inline-block;
                            text-align: left;
                            margin-right: 10px;
                            height: 25px;
                            line-height: 25px;
                        }
                    }
                }


            }

        }
    }

}